<%--
  Created by IntelliJ IDEA.
  User: 86187
  Date: 2021/10/21
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<html>
<head>
    <title>add</title>
    <link href="/resource/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
</head>
<body>

<div class="text-center">
    <h3>修改商品</h3>

    <form:form modelAttribute="goods" action="/update" method="post">
        <form:hidden path="id"></form:hidden><br>
        名称:<form:input path="name"></form:input>
        <form:errors path="name" cssClass="text-danger"></form:errors><br>
        <br>
        描述:<form:input path="ms"></form:input>
        <form:errors path="ms" cssClass="text-danger"></form:errors><br>
        <br>
        价格:<form:input path="price"></form:input>
        <form:errors path="price" cssClass="text-danger"></form:errors><br>
        <br>
        状态:
        上架:<form:radiobutton path="status" value="0"></form:radiobutton>
        下架 <form:radiobutton path="status" value="1"></form:radiobutton>
        <form:errors path="status" cssClass="text-danger"></form:errors><br>
        <br>
        品牌：<form:select path="bid">
       <%-- <form:options items="${listBrands}" itemLabel="bname" itemValue="bid"></form:options>--%>
    </form:select>
        <form:errors path="bid" cssClass="text-danger"></form:errors><br>

        商品分类：
        <select name="type1" id="type1" onchange="getType2(this.value)">
            <option value="">请选择</option>
        </select>
        <select name="type2" id="type2" onchange="getType3(this.value)">
            <option value="">请选择</option>
        </select>
        <select name="type3" id="type3">
            <option value="">请选择</option>
        </select>

        <br>
        <br>
        图片: <input type="file" name="file" onchange="upFile(this)">
        <form:errors path="picurl" cssClass="text-danger"></form:errors><br>
        <div id="pic">
            <c:forTokens items="${goods.picurl}" delims="," var="picurl">
                <img src="${picurl}" width="60px" height="80px">
                <input type="hidden" name="picurl" value="${picurl}">
            </c:forTokens>
        </div>
        <br>
        <button type="submit">修改</button>
    </form:form>


</div>

<script>

    //三级联动
    $(function () {
        //获取一级分类
        $.get("/listTypeByPid", {pid: 0}, function (list) {
            for (var i in list) {
                $("#type1").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
            }

            //获取要修改的商品的分类1
            var type1='${goods.type1}';

            $("#type1").val(type1);   //让一级分类选中

            getType2(type1);//调用分类2
        })
    })

    //获取二级分类
    function getType2(type1) {

        var pid =type1;// $(obj).val();//获取一级分类的id

        $("#type2").html("<option value='' >请选择</option>")
        $.get("/listTypeByPid", {pid: pid}, function (list) {

            for (var i in list) {
                $("#type2").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
            }

            //获取要修改的商品的分类2
            var type2='${goods.type2}';
            $("#type2").val(type2);   //让一级分类选中

            getType3(type2);//调用分类3

        })

    }

    //获取三级级分类
    function getType3(type2) {
        var pid =type2;// $(obj).val();//获取一级分类的id
        $("#type3").html("<option value='' >请选择</option>")
        $.get("/listTypeByPid", {pid: pid}, function (list) {

            for (var i in list) {
                $("#type3").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
            }
            //获取要修改的商品的分类2
            var type3='${goods.type3}';
            $("#type3").val(type3);   //让一级分类选中
        })

    }




    var i = 0

    //文件上传
    function upFile(obj) {
        var formData = new FormData();
        formData.append("file", obj.files[0]);
        $.ajax({
            type: "post",
            url: "/upFile",
            data: formData,
            processData: false,
            contentType: false,//js 不处理上传的文件类型
            success: function (url) {
                if (url) {
                    if (i > 2) {
                        alert("最多上传3个图片")
                        return;
                    }

                    if (i == 0) {
                        $("#pic").empty();//先清空上一次上传的图片,放开是单个文件上传，注释就是多个文件了
                    }
                    i++;
                    //获取文件上传的地址,并显示图片
                    $("#pic").append("<img src='" + url + "' width='80px' height='60px'>")
                    //为隐藏域赋值，把图片地址存入数据库
                    $("#pic").append("<input type='hidden' name='picurl' value='" + url + "'>")
                }
            }


        })


    }

    //动态的获取所有品牌
    $(function (){
        $.get("/listBrand",function (list){
            for(var i in list){
                $("#bid").append("<option value='"+list[i].bid+"'>"+list[i].bname+"</option>")

            }
            //让下拉框默认选中提交选中的值
            var bid= '${goods.bid}';
            $("#bid").val(bid);//选中
        })
    })
</script>
</body>
</html>
